<template>
  <div class="form-box">
    <el-form ref="ruleForm" :rules="rules" :model="itemInfo" label-width="auto">
      <el-form-item label="设置手机号输入框提示文字：" prop="tipTetx">
        <el-input
          maxlength="30"
          style="width:30%"
          v-model.trim="itemInfo.tipTetx"
          placeholder="请您输入提示文字"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-color-picker v-model="itemInfo.color" show-alpha> </el-color-picker>
      </el-form-item>
      <el-form-item label="设置领课按钮文字：" prop="buttonImg">
        <uploadSingImg
          :imgUrl="itemInfo.buttonImg"
          accept=".jpg,.jpeg,.png"
          :maxSize="10"
          @getImgUrl="getImgUrl"
        >
          <template v-slot:imgInfo>
            (建议上传图片尺寸 宽640px, png jpg格式,尺寸最大10M)
          </template>
        </uploadSingImg>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
export default {
  props: ['itemInfo'],
  components: { uploadSingImg },
  data() {
    return {
      rules: {
        tipTetx: [
          { required: true, message: '请输入提示文字', trigger: 'blur' }
        ],
        buttonImg: [
          { required: true, message: '请输上传图片', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    /* 按钮图片 */
    getImgUrl(url) {
      this.itemInfo.buttonImg = url
      this.$refs['ruleForm'].validateField('buttonImg')
    },
    /* 收集数据 */
    collectData() {
      let flag = false
      this.$refs['ruleForm'].validate((valid) => {
        flag = valid ? true : false
      })
      return flag ? this.itemInfo : false
    }
  }
}
</script>
<style lang="less" scoped></style>
